<!DOCTYPE html>
<html>

<head>
    <title>{$user.user_nickname} 资料编辑 - {$site_info.site_name|default=''}</title>
    <meta name="keywords" content="{$site_info.site_seo_keywords|default=''}" />
    <meta name="description" content="{$site_info.site_seo_description|default=''}">
    <include file="public@head" />
</head>

<body class="bg-white">
    <include file="public@nav" />
    <div class="content container">
        <div class="row">
            <div class="col-md-6 offset-md-3">
                <div class="user-profile-eidt">
                    <!-- <div class="action-item">
                        <div class="avatar">
                            <if condition="empty($avatar)">
                                <img src="/assets/dist/images/headicon-m.png" class="headicon" />
                                <else/>
                                <img src="{:cmf_get_user_avatar_url($avatar)}?t={:time()}" class="headicon" />
                            </if>
                            <div class="avatar-edit-box">
                                <input type="file" onchange="avatar_upload(this)" id="avatar_uploder" name="file" class="form-control" />
                            </div>
                            <div class="avatar-tips"><span>修改头像</span></div>
                        </div>
                        <div class="uploaded_avatar_area">
                            <div class="uploaded_avatar_btns">
                                <a class="btn btn-primary confirm_avatar_btn" onclick="update_avatar()"> 确定 </a>
                                <a class="btn btn-info" onclick="reloadPage()"> 取消 </a>
                            </div>
                        </div>
                    </div> -->
                    <h5 class="text-center my-4">基本资料</h5>
                    <form class="js-ajax-form px-2" action="{:url('user/profile/editPost')}" method="post" novalidate="novalidate">
                        <input type="hidden" name="from" value="mobile">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="basic-addon1">昵称</span>
                            </div>
                            <input type="text" class="form-control" placeholder="请设置昵称" name="user_nickname" aria-label="Username" aria-describedby="basic-addon1" value="{$user.user_nickname}">
                        </div>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="basic-addon1">性别</span>
                            </div>
                            <div class="form-control" id="input-sex">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="sex" id="inlineRadio1" value="1">
                                    <label class="form-check-label" for="inlineRadio1">男</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="sex" id="inlineRadio2" value="2">
                                    <label class="form-check-label" for="inlineRadio2">女</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="sex" id="inlineRadio3" value="0">
                                    <label class="form-check-label" for="inlineRadio3">保密</label>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="basic-addon1">生日</span>
                            </div>
                            <input class="form-control js-bootstrap-date" type="text" id="input-birthday" placeholder="请选择生日" name="birthday" value="">
                        </div> -->
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <label class="input-group-text" for="inputGroupSelect01">职业</label>
                            </div>
                            <select class="form-control text-secondary" name="user_job" id="inputGroupSelect01">
                                <option value="" selected>选择您的职业...</option>
                                <option value="1">产品设计师</option>
                                <option value="2">结构工程师</option>
                                <option value="3">平面设计师</option>
                                <option value="4">网页设计师</option>
                                <option value="5">UI设计师</option>
                                <option value="6">UX设计师</option>
                                <option value="7">建筑师</option>
                                <option value="8">景观设计师</option>
                                <option value="9">室内设计师</option>
                                <option value="10">设计爱好者</option>
                                <option value="11">艺术工作者</option>
                                <option value="12">教育工作者</option>
                                <option value="13">学生</option>
                                <option value="14">供应商</option>
                                <option value="99">其他</option>
                            </select>
                        </div>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <label class="input-group-text" for="inputGroupSelect01">城市</label>
                            </div>
                            <input class="form-control" type="hidden" name="user_region" id="user-region" value="" />
                            <div id="user-region-selector" class="form-control d-flex" data-autoselect="2">
                                <select class="col-6 p-0 text-secondary"></select>
                                <select class="col-6 p-0 text-secondary"></select>
                            </div>
                        </div>
                        <!-- <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">签名</span>
                            </div>
                            <textarea class="form-control" aria-label="签名" name="signature" placeholder="个性签名">{$user.signature}</textarea>
                        </div> -->
                        <div class="form-group pt-2">
                            <button type="submit" class="btn btn-block btn-warning js-ajax-submit">确定</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <include file="public@scripts" />
    <script type="text/javascript" src="__STATIC__/plugins/distpicker/distpicker.js"></script>
    <script type="text/javascript">
    $(function() {
        var $selector = $('#user-region-selector');
        var oldAddr = $('#user-region').val();
        var oldAddrArray = oldAddr.split('|');

        //初始化时获取已有的地址
        $('#user-region-selector').distpicker({
            province: oldAddrArray[0],
            city: oldAddrArray[1],
            district: oldAddrArray[2],
        });

        //select onchange时的地址更新
        $selector.children('select').change(function(event) {
            var newaddr = '';
            $.each($selector.children(), function(index, e) {
                newaddr += $(e).val() + '|';
            });
            $('#user-region').val(newaddr);
        });

    });

    function update_avatar() {
        var area = $(".uploaded_avatar_area img").data("area");
        $.post("{:url('Profile/avatarUpdate')}", area, function(data) {
            if (data.code == 1) {
                reloadPage(window);
            }

        }, "json");

    }

    function avatar_upload(obj) {
        var $fileinput = $(obj);
        /* $(obj)
         .show()
         .ajaxComplete(function(){
         $(this).hide();
         }); */
        Wind.css("jcrop");
        Wind.use("ajaxfileupload", "jcrop", "noty", function() {
            $.ajaxFileUpload({
                url: "{:url('Profile/avatarUpload')}",
                secureuri: false,
                fileElementId: "avatar_uploder",
                dataType: 'json',
                data: {},
                success: function(data, status) {

                    if (data.code == 1) {
                        $("#avatar_uploder").hide();
                        var $uploaded_area = $(".uploaded_avatar_area");
                        $uploaded_area.find("img").remove();
                        var src = "__ROOT__/upload/" + data.data.file;
                        var $img = $("<img/>").attr("src", src);
                        $img.prependTo($uploaded_area);
                        $(".uploaded_avatar_btns").show();
                        var img = new Image();
                        img.src = src;

                        var callback = function() {
                            console.log(img.width);
                            $img.Jcrop({
                                aspectRatio: 1,
                                trueSize: [img.width, img.height],
                                setSelect: [0, 0, 100, 100],
                                onSelect: function(c) {
                                    $img.data("area", c);
                                }
                            });
                        }

                        if (img.complete) {
                            callback();
                        } else {
                            img.onload = callback;
                        }

                    } else {
                        noty({
                            text: data.msg,
                            type: 'error',
                            layout: 'center',
                            callback: {
                                afterClose: function() {
                                    reloadPage(window);
                                }
                            }
                        });
                    }

                },
                error: function(data, status, e) {}
            });
        });

        return false;
    }
    </script>
</body>

</html>